<template>
    <div class="GyCheckBox">
        <div :class="{'checkbox':true, 'checked': checked}" @click="didClick">
            <transition name="show">
                <div v-if="checked" class="pointer"></div>
            </transition>
        </div>
        <div class="cover">
            <transition name="coverShow">
                <div v-if="coverShow" class="pointer"></div>
            </transition>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Model, Watch } from 'vue-property-decorator';
@Component({
    name: 'GyCheckBox'
})
export default class extends Vue {
    @Model('change')
    private checked!: boolean;
    private coverShow: boolean = false;
    private didClick(): void {
        this.$emit('change', !this.checked);
    }

    @Watch('checked')
    private onCheckedChange(): void {
        if (this.checked) {
            this.coverShow = true;
            let __this = this;
            setTimeout(() => {
                __this.coverShow = false;
            }, 300)
        }
    }
}
</script>

<style scoped lang="less">
.GyCheckBox {
    margin-right: 0.2rem;
    position: relative;
    width: 15px;
    height: 15px;
    & .checkbox {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border: 1px solid #999999;
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        & .pointer {
            width: 9px;
            height: 9px;
            background-color: #3B83FF;
        }
    }
    & .checked {
        border: 1px solid #3B83FF;
    }
    & .cover {
        position: absolute;
        z-index: 0;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        background-color: white;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        & .pointer {
            width: 15px;
            height: 15px;
            background-color: #3B83FF;
            opacity: 0.2;
        }
    }
}
.show-enter-active {
    transition: all 0.3s ease;
}
.show-leave-active {
    transition: all 0.2s ease;
}
.show-enter, .show-leave-to {
    transform: scale(0.1);
    opacity: 0;
}

.coverShow-enter-active {
    transition: all 0.3s ease;
}
.coverShow-leave-active {
}
.coverShow-enter {
    transform: scale(1.5);
    opacity: 0;
}
</style>
